<template>
  <!-- 首先下载，引入css，js，mounted中调用 -->
  <!-- 就是老师的vSwiper -->
  <div class="banner">
    <div class="ban">
      <div class="swiper-container">
        <div class="swiper-wrapper">
        <div v-for="item in bannerlist" :key="item.id"  class="swiper-slide">
          <img class="img_img11" :src="'http://localhost:3000' + item.img" alt="0" />
        </div>

          <!-- <div class="swiper-slide">
            <img src="../assets/image/icon/index/kingkong/top.png" alt="" />
          </div>

          <div class="swiper-slide">
            <img src="../assets/image/icon/index/kingkong/brand.png" alt="" />
          </div>

          <div class="swiper-slide">
            <img
              src="../assets/image/icon/index/kingkong/selfsupport.png" alt="" />
          </div> -->
        </div>
        <div class="swiper-pagination"></div>
      </div>
    </div>
    <ul class="guid1">
      <li v-for="(item, i) in guid" :key="i">
        <img :src="item.img" alt="" />
        <span>{{ item.name }}</span>
      </li>
    </ul>
    <!--  -->
  </div>
</template>
<script>
/* 在style中引入外联样式,轮播图
轮播图直接调用数据库信息，会出现轮播失效解决方式A，
将调用和赋值放入调用的父组件中，父组件得到后传入banner组件，props接收后直接v-for,同时轮播图加载小模块改为updated   or
把轮播图加载小模块用updated包裹
B，或者是直接将（轮播图加载小模块）用
this.$nextTick(()=>{
  轮播图加载小模块
})包裹一下
*/

import "../../node_modules/swiper/js/swiper.min";
import Swiper from "swiper";
import axios from "axios";
export default {
  props:['bannerlist'],
  data() {
    return {
      a: [1, 5, 6, 9],
      guid: [
        {
          id: 1,
          name: "显示秒杀",
          img: require("../assets/image/icon/index/kingkong/seckill.png"),
        },
        {
          id: 2,
          name: "畅销商品",
          img: require("../assets/image/icon/index/kingkong/top.png"),
        },
        {
          id: 3,
          name: "品质大牌",
          img: require("../assets/image/icon/index/kingkong/brand.png"),
        },
        {
          id: 4,
          name: "小u自营",
          img: require("../assets/image/icon/index/kingkong/selfsupport.png"),
        },
        {
          id: 5,
          name: "积分商城",
          img: require("../assets/image/icon/index/kingkong/integral.png"),
        },
      ],
      // 轮播图变量
      
    };
  },
  
  
  updated() {
    // 加载时直接调用轮播图
    // 轮播图
    console.log(this.bannerlist);
    new Swiper(".swiper-container", {
      loop: true,
      // autoplay:true
      autoplay: {
        delay: 200,
      },
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },

     //通过调用axios.all()并发处理这个方法，达到页面一加载就同时调用n个接口 axios.all() 必须是直接从axios库中取出来的
    //同时执行，因为是异步操作，那么你不能确定谁先执行，如果你在一个页面调用n个接口，且你需要他们有执行顺序，A接口调用出现的接口，b要用。。。就要让接口按顺序执行，类似于转成同步，记得引入axios
  //   axios.all([
  //       this.$axios({
  //         url: "/api/getbanner",
  //       }),
  //       this.$axios.get("/api/gethortgoods"),
  //     ])
  //     .then(
  //       axios.spread((banner, goods) => {
  //         console.log(banner, "res111");
  //         console.log(goods, "res2222");
  //         if (banner.data.code == 200) {
  //           this.bannerlist = banner.data.list;
  //         }
  //         if (goods.data.code == 200) {
  //           this.newgoods = goods.data.list[0].content;
  //           this.hotgoods = goods.data.list[1].content;
  //           this.goodslist = goods.data.list[2].content;
  //         }
  //       })
  //     );
  // },
  // 只有有数据之后才会显示
      // <v-swiper v-if="bannerlist.length > 0" :bannerlist="bannerlist"></v-swiper>
};
</script>
<style>
/* 在style中引入外联样式,轮播图 */
@import "../../node_modules/swiper/css/swiper.min.css";
.banner {
  width: 100%;
  height: 5.7rem;
  /* background: yellow; */
  padding-top: 0.3rem;
}

.banner .ban {
  width: 6.7rem;
  height: 3.9rem;
  background: violet;
  /* position: absolute; */
  /* top: 0.5rem; */
  margin: 0% auto;
}
.guid1 {
  width: 6.7rem;
  height: 0.94rem;
  /* background: #aaa; */
  margin: 0% auto;
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-between;
}
.guid1 li img {
  margin-left: 0.2rem;

}
/*  */
.swiper-container {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.swiper-slide img{
  width: 6.7rem;
  height: 3.9rem;
}

</style>